<template>
  <div @click="btnClick">
    <p v-if="!isActive"><slot name="tabbar-icon"></slot></p>
    <p v-else><slot name="tabbar-icon-active"></slot></p>
    <p :style="activeStyle">
      <slot name="tabbar-text"></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: "Tab-bar-item",
  props: {
    //传参判断点击的哪个
    path: String,
    activeColor: {
      type:String,
      default: "red",
    },
  },
  data() {
    return {
      // isActive: false,
    };
  },
  computed: {
    isActive() {
      //判断该path是否为活跃path
      return this.$route.path === this.path;
    },
    activeStyle() {
      //先判断是否活跃，活跃则赋色
      return this.isActive ? { color: this.activeColor } : {};
    },
  },
  methods: {
    btnClick() {
      // this.isActive =true
      this.$router.push(this.path);
    },
  },
};
</script>
<style scoped>
div {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 13px;
  background-color: #f5f5f5;
}
div img {
  display: block;
  margin: 3px auto;
  width: 25px;
}
</style>